<template>
  <van-skeleton :loading="isLoading">
    <template #template>
      <div :style="{ display: 'flex', width: '90%' }">
        <van-skeleton-image />
        <div :style="{ flex: 1, marginLeft: '16px' }">
          <van-skeleton-paragraph row-width="60%" />
          <van-skeleton-paragraph />
          <van-skeleton-paragraph />
          <van-skeleton-paragraph />
        </div>
      </div>
    </template>
  </van-skeleton>

  <div id="vanCard" v-if="chatRoom.length > 0">
    <van-card v-for="chat in chatRoom"
              @click="toGoChat(chat)"
    >
      <template #thumb>
        <van-image
            fit="cover"
            width="70"
            height="70"
            autocapitalize="characters"
            :src="chat.imageUrl"
            @click="toGoChat(chat)"
        />
      </template>
      <template #title>
        <div style="font-size: 15px;font-weight: bold">{{chat.notesName != null ? chat.notesName : chat.name}}</div>
      </template>

      <template #tags>
        <van-tag plain type="primary" style="margin-left: 5px;margin-top: 8px;">
          {{chat.type == 0 ? '群聊' : '私聊'}}
        </van-tag>
        <!--是否免打扰-->
        <svg v-if="chat.status == 1" t="1723567944758" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="3451" width="14" height="14"
             style="margin-left: 8px;margin-top: 8px;">
          <path d="M806.08512 989.752889L171.944676 70.769778A29.354667 29.354667 0 0 1 177.292231 31.857778l4.551111-3.697778a24.462222 24.462222 0 0 1 35.896889 5.688889l634.026667 919.04a29.354667 29.354667 0 0 1-5.233778 38.855111l-4.551111 3.697778a24.462222 24.462222 0 0 1-35.953778-5.688889zM419.240676 924.558222S419.297564 1024 511.17312 1024h1.422222c91.875556 0 91.875556-99.441778 91.875556-99.441778H419.297564zM511.969564 821.873778H299.944676l-74.638223 1.137778c-73.500444 0-66.958222 3.982222-23.495111-67.413334 46.307556-76.003556 79.644444-228.693333 79.644445-347.989333 0-29.013333 1.422222-60.416 6.542222-91.420445l-51.029333-73.955555c-17.521778 51.768889-22.755556 107.292444-22.755556 155.534222 0 139.207111-31.516444 287.516444-101.034667 381.155556-65.649778 88.462222 0 109.226667 39.765334 109.226666h529.635555l-45.738666-66.275555H511.912676z m398.791112-43.178667c-69.461333-93.582222-101.091556-241.891556-101.091556-381.098667 0-132.551111-39.765333-321.422222-266.353778-331.434666v-32.995556C543.258453 13.255111 530.970453 0 512.538453 0h-1.422222c-18.375111 0-30.606222 13.255111-30.606222 33.166222v33.109334c-65.820444 2.958222-115.939556 20.992-153.827556 48.298666L365.310009 170.666667c33.792-25.144889 80.668444-40.106667 145.749333-38.115556h1.422222c205.084444-6.599111 229.603556 155.761778 229.603556 275.057778 0 119.352889 33.336889 271.928889 79.644444 347.989333 39.708444 65.365333 48.583111 67.527111-6.542222 67.356445l44.942222 65.194666h10.581334c40.049778 0 105.699556-20.935111 40.049778-109.454222z" fill="#2c2c2c" p-id="3452"></path></svg>
      </template>

      <template #desc style="margin-top: 10px">
        <van-text-ellipsis :content="chat.content != null ? '[动画表情]' : '广州家教-小鑫学姐：01024912（开学单子）'" />
      </template>

      <template #footer>
        <!--  todo chat.nowTime  还要去比较时间是否为今天的 ，如果不是今天的 就要显示昨天 -->
        <div>11:34</div>
      </template>

      <!-- 角标 -->
      <template #tag>
        <van-badge :content="100" max="99" position="top-left"/>
      </template>
    </van-card>
  </div>

  <van-empty
      v-if="isEmptyData"
      image="search"
      image-size="80"
      description="暂无聊天室"
  />

  <!--  进入AI聊天室的浮窗 -->
  <van-floating-bubble
      style="background-color: #e9f1dc;"
      :offset="offset"
      axis="xy"
      magnetic="x"
      @click="onClickToChatAI"
  >
    <template #default>
      <svg t="1727087204867" class="icon" viewBox="0 0 1024 1024" version="1.1"
           xmlns="http://www.w3.org/2000/svg" p-id="7992"
           width="30" height="30">
        <path d="M431.207059 2.199998C335.414129 13.19899 257.420186 72.593947 219.024215 163.78688l-6.199996 14.797989-19.997985 5.799996C104.233299 210.582846 38.840347 279.776795 15.041364 372.369727c-6.999995 27.39698-8.999993 71.393948-4.199997 99.990927 7.399995 44.996967 26.597981 88.592935 53.795961 121.989911l9.198993 11.399991-5.199996 19.597986c-6.799995 26.597981-8.598994 74.593945-3.799997 103.190924 14.799989 87.392936 75.193945 163.58688 155.587886 196.383857 46.395966 18.998986 95.99193 24.797982 142.187895 16.798987l11.599992-1.999998 18.597986 17.598987c30.396978 28.596979 66.593951 48.395965 108.789921 59.994956 25.998981 6.999995 83.193939 8.999993 111.391918 3.599997 53.194961-9.799993 98.391928-33.797975 137.1889-72.794946 27.996979-28.196979 51.194963-64.393953 59.794956-93.591932 2.199998-6.999995 3.599997-8.599994 8.798993-9.799993 12.798991-2.598998 42.595969-13.39799 56.194959-20.196985 35.996974-17.998987 72.793947-49.195964 94.792931-80.593941 19.797985-28.197979 36.196973-65.993952 44.395967-102.990924 1.799999-7.799994 2.799998-24.997982 2.799998-48.995965 0-33.997975-0.6-38.796972-5.799996-58.995956-9.998993-38.795972-25.997981-71.993947-48.395964-100.190927l-10.198993-12.799991 4.399997-17.597987c26.79698-102.790925-16.798988-217.181841-105.391923-276.576797-30.996977-20.598985-58.194957-31.997977-95.59193-40.196971-22.397984-4.999996-70.993948-5.799996-91.991932-1.799998-12.399991 2.399998-12.99999 2.399998-15.799989-1.599999-4.598997-7.199995-34.795975-31.596977-52.794961-42.995969C548.196973 9.598993 486.603019-4.199997 431.207059 2.199998z m45.395967 67.793951c25.197982 2.399998 40.39697 6.399995 61.394955 16.198988 16.797988 7.799994 41.995969 23.397983 41.995969 25.997981 0 0.799999-45.595967 27.79798-101.390926 59.794956-55.995959 32.196976-104.591923 60.794955-108.19092 63.394954-14.799989 10.998992-14.399989 8.399994-14.59999 97.591928-0.2 43.995968-0.999999 110.389919-1.599998 147.387892l-1.199 67.393951-42.596968-24.397982-42.595969-24.397982 0.599999-134.988902c0.799999-154.386887 0.2-147.987892 19.597986-187.383862 29.797978-60.395956 86.792936-100.191927 151.987889-106.591922 8.199994-0.799999 15.398989-1.599999 15.998988-1.599999 0.6-0.2 9.798993 0.6 20.597985 1.599999z m268.977803 82.992939c73.393946 15.399989 132.189903 74.193946 147.387892 147.987892 3.599997 16.998988 4.599997 62.394954 1.599999 67.79495-1.199999 2.399998-22.797983-9.399993-108.590921-59.394957-105.391923-61.394955-107.191921-62.394954-117.989913-62.394954-10.799992 0-13.19999 1.399999-137.989899 73.593946l-126.989907 73.393946-0.599-49.395963c-0.2-27.19798 0.2-49.995963 1-50.795963 3.799997-3.599997 209.182847-121.189911 223.581836-127.989906 35.796974-16.797988 77.992943-21.397984 118.589913-12.798991z m-537.955606 362.369735c3.199998 4.599997 37.596972 25.398981 130.389904 78.993942 69.393949 39.796971 125.988908 72.993947 125.988908 73.593946 0 0.6-5.599996 4.199997-12.598991 8.199994-6.799995 3.799997-25.997981 14.797989-42.596968 24.397982l-30.196978 17.597987-107.790921-62.194954c-59.194957-34.196975-114.589916-67.393951-122.78991-73.793946-29.397978-22.597983-56.395959-63.793953-66.194952-101.190926-6.199995-24.197982-7.199995-60.794955-2.199998-84.992938 7.599994-36.996973 23.397983-66.994951 49.195964-93.792931 17.398987-17.997987 33.197976-29.396978 55.195959-40.195971l16.997988-8.199994 0.999999 127.589907 0.999999 127.589906 4.599997 6.398996zM750.379825 367.169731c56.394959 32.596976 108.389921 62.994954 115.589916 67.593951 43.396968 28.597979 73.593946 75.793944 81.99294 127.989906 3.599997 21.597984 1.599999 61.994955-3.999997 80.992941-8.998993 31.397977-24.996982 58.995957-47.594966 82.593939-17.598987 18.397987-48.195965 38.995971-65.794951 44.395967l-4.599997 1.399999v-124.189909c0-138.188899 0.4-133.389902-13.59899-143.387895-4.399997-2.999998-62.393954-37.196973-128.988906-75.593944-66.594951-38.596972-121.189911-70.393948-121.189911-70.993948-0.2-0.799999 83.592939-49.795964 85.192938-49.995964 0.4 0 46.595966 26.597981 102.991924 59.194957z m-181.385867 50.195963l54.99596 31.596977v127.989906l-55.19596 31.596977-55.194959 31.797977-39.196971-22.598983c-21.797984-12.398991-46.795966-26.99698-55.994959-32.196977l-16.398988-9.799993 0.399999-63.393953 0.6-63.394954 53.99496-31.396977c29.797978-17.198987 54.79596-31.397977 55.59596-31.397977 0.799999-0.2 26.197981 13.99999 56.394958 31.197977z m147.587892 85.592938l41.39697 23.797982v127.389907c0 139.787898-0.4 146.187893-11.999991 178.384869-11.597992 31.796977-36.595973 65.394952-64.593953 86.592937-6.799995 5.199996-21.397984 13.79899-32.396976 18.997986-51.995962 24.997982-109.59092 25.597981-162.586881 1.799999-12.598991-5.799996-40.39697-23.397983-40.396971-25.797982 0-0.6 46.996966-28.196979 104.191924-61.194955 57.394958-32.996976 107.190921-62.794954 110.789919-66.193951 3.799997-3.799997 7.399995-9.999993 8.799993-15.399989 1.599999-6.398995 2.199998-50.994963 2.199999-151.386889 0-78.392943 0.799999-141.987896 1.599999-141.587896 0.799999 0.2 20.197985 11.398992 42.995968 24.597982zM622.590919 732.139464c-3.799997 3.599997-205.38285 119.189913-221.781838 126.989907-26.597981 12.798991-47.995965 17.397987-79.792941 17.397987-19.798985 0-30.197978-0.999999-43.596968-4.199997-68.59395-16.997988-120.589912-66.193952-140.587897-133.787902-5.599996-18.798986-8.599994-57.395958-5.999996-75.193945l1.399999-9.199993 50.395963 29.197979c174.185872 100.391926 165.185879 95.59193 176.185871 95.591929 9.598993-0.2 16.597988-3.799997 137.1879-73.393946l126.989907-73.393946 0.599999 49.395964c0.2 26.99798-0.2 49.795964-0.999999 50.595963z" fill="#1296db" p-id="7993"></path></svg>
    </template>
  </van-floating-bubble>

</template>



<script setup lang="ts">
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import {getChatRoomByUserId} from "../api/chatApi.ts";
import {userStore} from "../stores/user/user.ts";
import {chatStore} from "../stores/chat/chat.ts";
const router = useRouter();
const userStoreAPI = userStore();
const chatStoreAPI = chatStore();

const isLoading = ref(true);//是否属于加载过程
const isEmptyData = ref(false);//是否显示空白数据组件

//所有房间的信息
const chatRoom = ref([]);

const offset = ref({ x: 280, y: 500 });

//前往具体聊天室
const toGoChat = (chat:object)=>{
  console.log('聊天室',chat);
  chatStoreAPI.setChatData(chat);
  router.push({
    path:'/chat',
    query: {
      name: chat.notesName != null ? chat.notesName : chat.name
    }
  });
}


onMounted( async ()=>{
  isLoading.value = true;
  const currentUser = await  userStoreAPI.getCurrentUser();
  const res = await getChatRoomByUserId(currentUser.id);
  console.log('res',res.data);
  if (200 == res.code){
    chatRoom.value = res.data;
    isLoading.value = false;
    if (chatRoom.value.length <= 0){//没有数据
      isEmptyData.value = true;
    }
  }
});


const onClickToChatAI = () => {
  //跳转到我们的添加队伍的页面
  router.push("/aiChat");
};


</script>


<style scoped>

</style>